<template>
<div>
   <router-link to="/layout/finance">
        <div class="p1"><img src="../../../assets/shugang.png" alt="">&emsp;财务数据</div>
    </router-link>
    
    <div id="caiwu" style="width:100%;height:400px;"></div>
</div>
</template>

<script>
import * as echarts from 'echarts'
export default {
   data(){
    return{
        arrX:[24000,14000,23000,27500,15000,20000,15000,29000,6000,12000],
        arrY:['03-01', '03-02', '03-03', '03-04', '03-05', '03-06','03-07','03-08','03-09','03-10']
    }
   },
   mounted(){
      this.initEchart()
   },
   methods:{
    initEchart(){
        var myecart = echarts.init(document.getElementById('caiwu'))
        myecart.setOption({ 
            title: {
                // text: '财务数据',
            },
            tooltip: {},
            xAxis: {
                axisTick: {show: false},
                data: this.arrY
            },
            yAxis: {
                
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    barWidth:10,
                    data: this.arrX,
                    itemStyle: {
                        normal:{
                            color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                              '#C980FF','#8AD1FF','#F09F63','#A3DF5F','#EA6B80',
                               '#5D6CEB','#9BCA63','#5D9AEB','#EB6B5D','#60EB5D',
                            ];
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: colorList[params.dataIndex] },
                                { offset: 1, color: 'white' }
                            ])
                            },
                        }       
                    },
                },
            ]
        })
    }
   }
}
</script>

<style lang="less" scoped>
  .p1{
     font-weight:bold;font-size:18px;margin-left:30px;margin-bottom: 10px;
     transform: translateY(20px);
  }
  img{
     transform: translateY(1px);
  }
  .p1:hover{
    color:#558BFD
  }
</style>